<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>思维脑图-kityminder.core</title>
    <link href="./lib/kityminder.core/kityminder.core.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      #minder-container {
        width: 100%;
        height: 500px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <form>
      <div>
        <button type="button" onclick="addNode();">添加节点</button>
        <button type="button" onclick="editNode();">编辑节点</button>
        <button type="button" onclick="writeToConsole();">导出json到Console</button>
        <button type="button" onclick="setTemplate(this);">设置模板(default)</button>
      </div>
    </form>
    <!-- 思维脑图区域 -->
    <div id="minder-container"></div>

    <!-- https://github.com/fex-team/kityminder-core/wiki -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/kityminder.core/kity.js"></script>
    <script src="./lib/kityminder.core/kityminder.core.js"></script>
    <script type="text/javascript">
      // 创建 minder 实例
      var minder = (window.minder = new kityminder.Minder({ renderTo: '#minder-container' }))
      minder.importJson({
        template: 'default', // 模板
        root: {
          data: {
            id: '1',
            text: '百度产品',
            image: '',
            imageSize: { width: 270, height: 129 },
          },
          children: [
            { data: { id: '2', text: '新闻' } },
            { data: { id: '3', text: '网页', priority: 1 } },
            { data: { id: '4', text: '贴吧', priority: 2 } },
            {
              data: { id: '5', text: '更多', priority: 3, hyperlink: 'http://www.baidu.com/more' },
            },
          ],
        },
      })

      //注册选择变化事件
      minder.on('selectionchange', function () {
        var node = minder.getSelectedNode()
        if (node) {
          console.log(node)
          console.log('选中节点: ' + node.getText())
          console.log('选中节点对象: ' + JSON.stringify(node.data))
          if (node.getParent()) {
            console.log('父节点: ' + node.parent.getText())
            console.log('父节点对象: ' + JSON.stringify(node.parent.data))
          }
          if (node.getChildren()) {
            console.log('子节点数量: ' + node.getChildren().length)
          }
        }
      })

      //注册双击事件
      minder.on('dblclick', function () {
        var node = minder.getSelectedNode()
        if (node) {
          alert('节点 ' + node.getText() + ' 被双击了')
        }
      })

      //minder.disable();//禁止命令使用
      //minder.execCommand('hand');//切换抓手状态，抓手状态下，鼠标拖动将拖动视野，而不是创建选区

      function addNode() {
        if (minder.queryCommandState('AppendChildNode') == '-1') {
          alert('请选择节点')
        } else {
          minder.execCommand('AppendChildNode', { text: '添加节点', background: '#ffff00' })
          //改变颜色
          minder.execCommand('Background', '#ffff00')
          var node = minder.getSelectedNode()
          node.data.sign = '添加标志'

          //父节点
          var pnode = node.getParent()
          console.log(node.getData('id'))
          console.log(pnode.getData('id'))

          minder.selectById(pnode.getData('id'))
          minder.execCommand('AppendChildNode', { text: '添加节点2', background: '#ffff00' })
        }
      }

      function editNode() {
        if (minder.queryCommandState('AppendChildNode') == '-1') {
          alert('请选择节点')
        } else {
          minder.execCommand('EditNode')
        }
      }

      function writeToConsole() {
        var jsonobj = minder.exportJson()
        console.log(JSON.stringify(jsonobj))
      }

      function setTemplate(e) {
        t = kityminder.Minder.getTemplateList()
        console.log(t)
        var arr = ['default', 'filetree', 'fish-bone', 'right', 'structure', 'tianpan']
        var random = Math.round(Math.random() * 5)
        minder.execCommand('Template', arr[random])
        $(e).html('设置模板(' + arr[random] + ')')
      }
    </script>
  </body>
</html>
